<template>
    <div class="info_container">
        <HeaderTop :goBack="true" :headTitle="'账号信息'"></HeaderTop>
        <section class="profile_info">
            <section class="headportrait">
                <input type="file" @change="selectedFile" accept="image/png,image/jpeg,image/gif,image/jpg">
                <h2>头像</h2>
                <span class="headportrait_div">
                    <img v-if="isLogin || selectedImg" :src="imgsrc" class="privateImage" alt="avatar">
                    <svg class="privateImage" v-else>
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#avatar-default"></use>
                    </svg>
                    <span class="arrow">
                        <svg fill="#bbb">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </span>

            </section>
            <router-link class="info_router" to="/profile/info/username">
                <h2>用户名</h2>
                <span class="headportrait_div">
                    <p>{{user&&user.username}}</p>
                    <span class="arrow">
                        <svg fill="#bbb">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </span>
            </router-link>
            <router-link class="info_router" to="/profile/info/address">
                <h2>收货地址</h2>
                <span class="headportrait_div">
                    <span class="arrow">
                        <svg fill="#bbb">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </span>
            </router-link>
            <section class="bind_phone">账号绑定</section>
            <section class="info_router"  @click="changePhone">
                <h2><img :src="icon_phone" style="display:inline-block;margin-right:.4rem;" alt="">手机</h2>
                <span class="headportrait_div">
                    <span class="arrow">
                        <svg fill="#bbb">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </span>
            </section>
            <section class="bind_phone">安全设置</section>
            <router-link class="info_router" to="/forget">
                <h2>修改登录密码</h2>
                <span class="headportrait_div">
                    <span class="arrow">
                        <svg fill="#bbb">
                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow-right"></use>
                        </svg>
                    </span>
                </span>
            </router-link>
        </section>

        <section class="logout_container">
            <div class="logout_btn" @click="showAlertHandle">退出登录</div>
        </section>
        <AlertTips :alertText="alertMsg" v-if="showAlert">
            <template #twoBtn>
                <section class="btn_groups">
                    <div class="btn_cancel" @click="closeAlertHandle">再等等</div>
                    <div class="btn_quit" @click="quickAccountHandle">退出</div>
                </section>
            </template>
        </AlertTips>
        <transition name="route-slide">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script>
import HeaderTop from '@src/components/header/HeaderTop'
import AlertTips from '@src/components/common/AlertTips'
import {mapState} from 'vuex'
import {imgBasePath} from '../../../utils/config'
import icon_phone from '../../../assets/imgs/bindphone.png'
import {uploadFileIcon} from '../../../api/getData'
import {mapActions} from 'vuex'
export default {
    components:{
        HeaderTop,
        AlertTips,
    },
    computed:{
        ...mapState(['user']),
        isLogin(){
            return this.user && this.user.user_id
        }
    },
    data(){
        return {
            selectedImg:'', // 选择的图片
            imgsrc:'',
            icon_phone,
            showAlert:false,
            alertMsg:''
        }
    },
    mounted(){
        this.initData()
    },
    methods:{
        ...mapActions(['clearUserInfo']),
        initData(){
            if(this.isLogin){
                this.imgsrc = imgBasePath + this.user.avatar;
            }
        },
        async selectedFile(e){
            if(e.target.files.length===0){
                return;
            }
            let file = e.target.files[0];
            let data = new FormData();
            data.append('file', file);
            this.imgsrc=URL.createObjectURL(file);
            
            // 可以选择上传icon
            // let response = await uploadFileIcon(this.user.user_id,data);
            // console.log(response);
        },
        changePhone(){

        },
        showAlertHandle(){
            this.alertMsg='是否要退出登录';
            this.showAlert=true;
        },
        closeAlertHandle(){
            this.showAlert=false;
        },
        quickAccountHandle(){
            this.clearUserInfo();
            this.closeAlertHandle();
            this.$router.push('/profile')
        }

    }
}
</script>

<style lang="scss" scoped>
@import '~@styl/mixin.scss';
.info_container{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 202;
    background: #F5F5F5;
    padding-top: 2.3rem;
    .profile_info{
        background: $fc;
        .headportrait{
            @include fj;
            align-items: center;
            padding: 0.5rem 0.4rem;
            border-bottom: 0.025rem solid $bc;
            input[type=file]{
                display: block;
                position: absolute;
                left: 0;
                @include wh(100%,3.1rem);
                opacity: 0;
            }
        }
        h2{
            @include sc(0.6rem,#333);
            font-weight: 500;
            flex: 1;
            display: flex;
            align-items: center;
        }
        .headportrait_div{
            display: flex;
            align-items: center;
            p{
                @include sc(0.7rem,#999);  
            }
            .privateImage{
                @include wh(2rem ,2rem);
                border-radius: 50%;
                svg{
                    @include wh(100%,100%);
                }
            }
        }
        .arrow{
            display: flex;
            margin-left: 0.5rem;
            @include wh(0.7rem,0.7rem);
            svg{
                @include wh(100%,100%);
            }
        }
        .info_router{
            padding: 0.5rem 0.4rem;
            @include fj;
            align-items: center;
            border-bottom: 0.025rem solid $bc;
        }
        .bind_phone{
            background: #F5F5F5;
            @include sc(0.5rem,#666);
            padding: 0.4rem;
        }
    }
    .logout_container{
        margin-top: 1rem;
        padding: 0 0.6rem;
        .logout_btn{
            background: #d8584a;
            line-height: 1.5rem;
            @include sc(0.6rem,#fff);
            text-align: center;
            border-radius: 0.2rem;
        }
    }
}
.btn_groups{
    display: flex;
    margin-top: 0.55rem;
    width: 100%;
    div{
        flex: 1;
        font-size:0.65rem;
        height: 1.5rem;
        line-height: 1.5rem;
        text-align: center;
    }
    .btn_cancel{
        color: #333;
        background: #f1f1f1;
        border-bottom-left-radius: 0.25rem;
    }
    .btn_quit{
        color: #fff;
        background: $green;
        border-bottom-right-radius: 0.25rem;
    }
}
.route-slide-enter,
.route-slide-leave-to
{
    transform: translateX(4rem);
    opacity: 0;
}
.route-slide-enter-active,
.route-slide-leave-active{
    transition: all 0.3s ease-in-out;
}
</style>